<template>
  <div class="nav_container">
    <ul>
      <li><router-link to="/homePage">商品首页</router-link></li>
      <li>
        <a href="#">所有商品</a>
        <div class="dropdown-content-one">
          <div class="wrapper">
            <a href="#">
              <div class="img-div-one">
                <img src="@/assets/images/nav1.jpg" alt="" />
              </div>
              <div class="dropdown-text-div">
                <span>浓情欧式</span>
              </div>
            </a>
            <a href="#">
              <div class="img-div-one">
                <img src="@/assets/images/nav2.jpg" alt="" />
              </div>
              <div class="dropdown-text-div">
                <span>浪漫美式</span>
              </div>
            </a>
            <a href="#">
              <div class="img-div-one">
                <img src="@/assets/images/nav3.jpg" alt="" />
              </div>
              <div class="dropdown-text-div">
                <span>雅致中式</span>
              </div>
            </a>
            <a href="#">
              <div class="img-div-one">
                <img src="@/assets/images/nav6.jpg" alt="" />
              </div>
              <div class="dropdown-text-div">
                <span>简约现代</span>
              </div>
            </a>
            <a href="#">
              <div class="img-div-one">
                <img src="@/assets/images/nav5.jpg" alt="" />
              </div>
              <div class="dropdown-text-div">
                <span>创意装饰</span>
              </div>
            </a>
          </div>
        </div>
      </li>
      <li><a href="#">装饰摆件</a></li>
      <li><a href="#">布艺软饰</a></li>
      <li><a href="#">墙饰壁挂</a></li>
      <li><a href="#">蜡艺香薰</a></li>
      <li><a href="#">创意家居</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'myNav'
}
</script>

<style lang="less" scoped>
.nav_container {
  font-size: 0px;
  text-align: center;
  position: relative;
  border-top: 2px solid #dbdbdb;
  li {
    padding: 0 10px;
    list-style: none;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    > a {
      display: block;
      padding: 0 10px;
      cursor: pointer;
      font-size: 18px;
      position: relative;
    }
    > a::after {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 4px;
      content: '';
      position: absolute;
      transform: scaleX(0);
      // background-color: #a10000;
      background-color: #009688;
    }
    > a:hover::after {
      transform: scaleX(1);
      transition: all 0.5s ease;
      transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    }
  }
}

.dropdown-content-one {
  left: 0;
  top: 50px;
  z-index: 2;
  width: 100%;
  display: none;
  padding: 20px 0;
  position: absolute;
  background-color: #fff;
  border-top: 2px solid #dbdbdb;
  box-shadow: inset 0px -16px 16px 0px rgba(0, 0, 0, 0.2);
  .wrapper {
    width: 70%;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    a {
      padding: 0 20px;
      display: inline-block;
      border-right: 2px solid #dbdbdb;
    }
    a:last-child {
      border-right: none;
    }
  }
  .img-div-one {
    line-height: 0;
    img {
      width: 100%;
    }
  }
}
</style>
